<template>
  <swiper-action @onClickAction="onClickAction">
    <view class="store-item">
      <view class="store" @click="onJumpStore">
        <u-image :src="item.logoImg ? item.logoImg + '!/sq/80' : storeDefault" width="80" height="80"></u-image>
        <view class="info">
          <view class="title-wrapper">
            <text class="title">{{item.store_name}}</text>
            <text class="type" :class="'type-' + item.store_type">{{item.store_type | formatStoreType}}</text>
          </view>
          <view class="address-wrapper">
            <text class="address">{{item.address}}</text>
            <text class="distance">{{item.distance |formatDistance}}</text>
          </view>
        </view>
      </view>
      <view class="car-list">
        <scroll-view class="car-list-scroll" scroll-x>
          <block v-for="(i, k) in item.cars" :key="k">
            <view class="car-list-item" @click="onJumpDetails(i)">
              <u-image :src="i.goodimg + '!/fw/208'" width="208" height="144"></u-image>
              <text class="title">{{i.configuration_name}}</text>
              <view class="price-wrapper" v-if="i.is_loans === 1">
                <view class="flex flex-ai-c">
                  <text class="mark-price overflow">{{i.factory_price | formatPrice}}</text>
                  <text class="iconfont iconarrow-up"></text>
                  <text class="drop-price overflow">{{i.factory_price - i.client_price | formatNum}}</text>
                </view>
                <text class="price">裸车价<text class="num">{{i.client_price | formatNum}}</text>{{i.client_price | formatUnit}}</text></text>
              </view>
              
              <block v-else>
                <view class="price-wrapper" v-if="i.down_minimum_down_payment">
                  <text class="month">月供{{i.down_minimum_Monthly_payments | formatPrice(true)}}</text>
                  <text class="price">首付<text class="num">{{i.down_minimum_down_payment | formatNum}}</text><text class="unit">{{i.down_minimum_down_payment | formatUnit}}</text></text>
                </view>
                <view class="price-wrapper" v-else>
                  <text class="month">月供{{i.rent_minimum_Monthly_payments | formatPrice(true)}}</text>
                  <text class="price">首付<text class="num">{{i.rent_minimum_down_payment | formatNum}}</text><text class="unit">{{i.rent_minimum_down_payment | formatUnit}}</text></text>
                </view>
              </block>
            </view>
          </block>
        </scroll-view>
      </view>
    </view>
  </swiper-action>
</template>

<script>
import swiperAction from './swiper-action.vue'
// 格式化金额
function numberFormat (data) {
  let param = {}
  let k = 10000
  let sizes = ['元', '万', '亿', '万亿']
  let i
  let value = data < 0 ? -data : data
  if(!value) return ''
  if(value < k) {
    param.value =value
    param.unit = ''
  } else {
    i = Math.floor(Math.log(value) / Math.log(k))
    param.value = (data < 0 ? '-' : '') + ((value / Math.pow(k, i))).toFixed(2)
    param.unit = sizes[i]
  }
  return param
}
export default {
  components: {
    swiperAction
  },
  data() {
    return {
      storeDefault: 'https://files.yzsheng.com/client/store/store_default.png'
    }
  },
  props: {
    // 当前列表项
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 当前列表项索引
    itemIndex: {
      type: [String, Number],
      default: ''
    }
  },
  filters: {
    formatStoreType(data){
      let text = ''
      switch(Number(data)) {
        case 5:
          text = '旗舰店'
          break
        case 2:
          text = '体验店'
          break
        case 3:
          text = '中心店'
          break
        case 4:
          text = '4S店'
          break
        default:
          text = '旗舰店'
          break
      }
      return text
    },
    formatDistance(data) {
      let distance = Number(data)
      if(distance < 1000){
        return distance + 'm'
      }else if(distance > 1000){
        return (Math.round(distance / 100) / 10 ).toFixed(1) + 'km';
      }
    },
    // 格式化价格
    formatPrice (data, unit) {
      if(!data) return '0'
      let res = numberFormat(data)
      if(unit && data < 1000) {
        res.unit === '元'
      }
      return res.value + res.unit
    },
    // 格式化单位
    formatUnit(data) {
      if(!data) return '元'
      let res = numberFormat(data)
      return res.unit
    },
    // 格式化金额
    formatNum(data) {
      if(!data) return '0'
      let res = numberFormat(data)
      return res.value
    }
  },
  methods: {
    // 右侧按钮点击
    onClickAction(type) {
      this.$emit('onClickAction', {
        type: type,
        index: this.itemIndex,
        item: this.item
      })
    },
    // 跳转店铺详情
    onJumpStore() {
      uni.navigateTo({
        url: `/pages_store/newCarStore/index/index?storeid=${this.item.carstore_id}`
      })
    },
    // 跳转车源详情
    onJumpDetails(data) {
      if(data.is_loans === 1) {
        uni.navigateTo({
          url: `/pages_commodity/giantnengjiangDetails/giantnengjiangDetails?goodid=${data.id}`
        })
      } else {
        uni.navigateTo({
          url: `/pages_commodity/sourceDetails/sourceDetails?goodid=${data.id}`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.store-item{
  margin: 0 24rpx;
  padding: 0 20rpx;
  .store{
    display: flex;
    align-items: center;
    padding: 18rpx 0;
    border-bottom: 2rpx solid #eee;
    .info{
      margin-left: 24rpx;
      flex: 1;
      height: 80rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title-wrapper{
        display: flex;
        align-items: center;
        .title{
          font-size: 32rpx;
          color: #333;
          font-weight: bold;
        }
        .type{
          height: 30rpx;
          line-height: 30rpx;
          font-size: 20rpx;
          color: #3F3F3F;
          padding: 0 8rpx;
          margin-left: 24rpx;
          background-image: linear-gradient(0deg, #FBD220, #FFE23E);
          border-radius: 5px;
        }
        .type-1, .type-6{
          background-image: linear-gradient(0deg, #FBD220, #FFE23E);
        }
        .type-2{
          background-image: linear-gradient(180deg, #FFEEC8, #FFAD9A);
        }
        .type-3{
          background-image: linear-gradient(0deg, #FF7590, #FFD39B);
        }
        .type-8{
          background-image: linear-gradient(0deg, #93BCFF, #BEF4FF);
        }
        .type-4{
          background-image: linear-gradient(0deg, #A8D36A, #ECF9C3);
        }
      }
      .address-wrapper{
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;
        .address{
          display: block;
          flex: 1;
          margin-right: 88rpx;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }
    }
  }
  .car-list{
    padding: 24rpx 0;
    .car-list-scroll{
      white-space: nowrap;
      ::-webkit-scrollbar {
      	display: none;  
      	width: 0 !important;  
      	height: 0 !important;
      	-webkit-appearance: none;
      	background: transparent;  
      }
    }
    .car-list-item{
      width: 208rpx;
      margin-right: 22rpx;
      overflow: hidden;
      display: inline-block;
      white-space: normal;
      &:last-child{
        margin-right: 0;
      }
      .title{
        height: 68rpx;
        font-size: 26rpx;
        color: #343434;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .price-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 14rpx;
        height: 88rpx;
        .month{
          color: #FC4040;
          font-size: 20rpx;
        }
        .price{
          font-size: 24rpx;
          color: #FC4040;
          margin-top: 4rpx;
          .num{
            font-size: 32rpx;
            margin-left: 6rpx;
          }
          .unit{
            font-size: 26rpx;
          }
        }
        .flex{
          .mark-price{
            font-size: 20rpx;
            color: #999;
            text-decoration: line-through;
          }
          .iconfont{
            font-size: 20rpx;
            margin-left: 12rpx;
            color: #51A400;
            perspective: 1000;
            transform: rotate(180deg);
          }
          .drop-price{
            color: #51A400;
            font-size: 20rpx;
          }
        }
        .overflow{
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }
    }
  }
}
</style>
